<template>
  <div class="sidebar-box" :class="{ 'is-collapse': keyCollapse }">
    <el-scrollbar>
      <el-menu
        unique-opened
        :default-active="toIndex"
        mode="vertical"
        :show-timeout="200"
        :collapse="keyCollapse"
        :active-text-color="variables['menu-active-text']"
      >
        <SiderBarItem
          :menu="allMenu"
          first
          :collapse="keyCollapse"
        ></SiderBarItem>
      </el-menu>
    </el-scrollbar>
    <div
      class="sidebar-footer ht-40 fx-bt-ct bd-e7-tp"
      :class="{ 'is-collapse': keyCollapse }"
    >
      <div class="collapse-btn ic-16 cs-pt" @click="setCollapse"></div>
      <!-- <div
        class="mg-lt-16 cs-pt bd-pm-1 bd-rd-3 pd-lf-8 pd-rt-8"
        v-show="!keyCollapse"
      >
        <TrDropdown
          v-model="factValue"
          :dataList="factoryList"
          :color="variables['menu-active-text']"
          @dropBack="commandHandle"
        >
          <template slot="behind">
            <img class="ic-16" src="@/assets/icons/switch.png" />
          </template>
        </TrDropdown>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import website from "@/config/website";
// import TrDropdown from "@/components/Tr-dropdown/Tr-dropdown.vue";
import SiderBarItem from "./sidebar-item";
import variables from "@/styles/variables.module.scss";
export default {
  name: "SidebarBox",
  components: { SiderBarItem },
  computed: {
    ...mapGetters([
      "activeMenu",
      "allMenu",
      "keyCollapse",
      "factoryId",
      "factoryList",
    ]),
    toIndex() {
      return this.$route.path;
    },
    variables() {
      return variables;
    },
  },
  data: () => ({
    factValue: "",
  }),
  methods: {
    commandHandle(val) {
      this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("login.changeTip")],
      })
        .then(() => {
          this.$store.commit("SET_FACTORY_ID", val.value);
          this.$store.commit("SET_CHANGESTATE", true);
          this.$router.push(website.firstPage.value);
          setTimeout(() => {
            this.$store.commit("SET_CHANGESTATE", false);
          }, 1000);
        })
        .catch(() => {
          this.factValue = this.factoryId;
        });
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
  },
  mounted() {
    console.log(this.allMenu, ">>>>>>>>>>>>>>", this.$route.path);
    this.factValue = this.factoryId;
  },
};
</script>
